<template>
  <div class="wrap w-bid-info detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/r_w.png" alt="" />
        发标信息
    </header>
    <div class="head">
        <div class="items clearfix">
            <div class="item">①填写发表信息</div>
            <div class="item">②确认您的需求</div>
            <div class="item">③坐等报价</div>
        </div>
    </div>
    <div class="ts clearfix">
        <img src="@/assets/img/ts.png" alt="" />
        <p>温馨提示：您所填写的所有资料医麦网都会做加密处理，信息绝对安全，只有在交易促成的情况下我们才会根据情况逐步显示您的必要信息，请放心填写，如有疑问请咨询客服，谢谢。</p>
    </div>
    <form action="">
        <div class="pro" v-for=" (val,index) in addPro" v-bind:key="index">
            <span class="plus" @click="delPro(index)" v-if="index" :index="index">-</span>
            <div class="group">
                <label>名称
                    <input  data-tag="goods_name" name="goods_name" :index="index" @blur="setInputValue" type="text" placeholder="请填写"/>
                </label>
            </div>
            <div class="group">
                <label>品牌/型号
                    <input  data-tag="goods_brand_model" name="goods_brand_model" :index="index" @blur="setInputValue" type="text" placeholder="请填写" />
                </label>
            </div>
            <div class="group">
                <label>单位
                    <input  data-tag="goods_unit" name="goods_unit" :index="index" @blur="setInputValue" type="text" placeholder="请填写,如：台，支" />
                </label>
            </div>
            <div class="group">
                <label>数量
                    <input  data-tag="goods_num" name="goods_num" :index="index" @blur="setInputValue" type="text" placeholder="请填写" />
                </label>
            </div>
            <div class="group">
                <label>单价
                    <input  data-tag="goods_price" name="goods_price" :index="index" @blur="setInputValue" type="text" placeholder="请填写" />
                </label>
            </div>
            <div class="text">
                <p>产品说明</p>
                <textarea data-tag="goods_remark" name="goods_remark" :index="index" @blur="setInputValue" id="" placeholder="请尽可能详细的填写您所招标的产品说明，方便广大供应商更加快速精准的竞标您的订单，并提供合理的报价。"></textarea>
            </div>
    
        </div>

         <div class="more" @click="addNewPro">
                <span class="plus">+</span>&nbsp;&nbsp;继续添加产品
         </div>
            
        <div class="pro-info">
            <div class="tit">项目信息</div>
            <div class="box">
                <div class="group">
                    <label>分类
                      <input :value="bid_type_txt" readonly @click="showBidTypePicker" type="text"  placeholder="请选择" />
                    </label>
                </div>
                <div class="group content-block">
                    <label>
                        所在省市
                        <input :value="address_txt" @click="showAddressPicker" type="text" readonly placeholder="请选择" />
                    </label>
                </div>
                <div class="group">
                    <label>详细地址
                      <input :value="bid_post_addr"  data-tag="bid_post_addr" name="bid_post_addr" @blur="setVal" type="text" placeholder="请填写" />
                    </label>
                </div>
                <div class="group">
                    <label>联系人
                      <input :value="bid_contact_name" data-tag="bid_contact_name" name="bid_contact_name" @blur="setVal"  type="text" placeholder="请填写" />
                    </label>
                </div>
                <div class="group">
                    <label>联系电话
                      <input :value="bid_contact_phone" data-tag="bid_contact_phone" name="bid_contact_phone" @blur="setVal"  type="text" placeholder="请填写" />
                    </label>
                </div>
                <div class="group time content-block">
                    <label>
                        交货时间
                        <input :value="bid_time_txt" readonly @click="showBidTimePicker" type="text"  placeholder="请选择" />
                    </label>
                </div>
                <div class="group">
                    <label>预算<input :value="bid_budget" data-tag="bid_budget" name="bid_budget" @blur="setVal"
                     type="text" placeholder="请填写" /></label>
                </div>
                <div class="group">
                    <label>付款方式
                        <input :value="bid_pay_type_txt" readonly @click="showBidPayTypePicker" type="text"  placeholder="请选择" />
                    </label>
                </div>
            </div>
        </div>
        <div class="beizhu">
            <p>项目说明</p>
            <textarea data-tag="bid_remark" name="bid_remark" @blur="setVal"  id="" placeholder="请尽可能详细的填写您所招标的产品说明，方便广大供应商更加快速精准的竞标您的订单，并提供合理的报价。"></textarea>
        </div>
        <div class="ts ts2 clearfix">
            <img src="@/assets/img/ts.png" alt="" />
            <p>温馨提示：您所填写的所有资料医麦网都会做加密处理，信息绝对安全，只有在交易促成的情况下我们才会根据情况逐步显示您的必要信息，请放心填写，如有疑问请咨询客服，谢谢。</p>
        </div>
        <button @click="formSubmit" type="button">
            <a style="display: block;height: 1rem;line-height: 1rem;padding-bottom:1.4rem" >提交</a>
        </button>
    </form>

   <Bartab />

</div>


</template>

<script>
// @ is an alias to /src
import Bartab from '@/components/Bartab.vue'
import { provinceList, cityList, areaList } from '@/area'
const addressData = provinceList
addressData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
export default {
  name: 'my',
  data(){
    return{
        addPro:[
            {
                goods_name:'',
                goods_brand_model:'',
                goods_unit:'',
                goods_num:'',
                goods_price:'',
                goods_remark:''
            },
            
        ],
        bid_name:'',//
        bid_type:0,//项目分类
        bid_type_txt:'',
        bid_post_addr:'',//详细地址 
        bid_contact_name:'', //联系人
        bid_contact_phone:0, //联系电话 
        bid_arrival_time:0,//交货时间 
        bid_time_txt:'',
        bid_budget:0,//预算 
        bid_pay_type:0, //付款方式
        bid_pay_type_txt:'',
        bid_remark:'',//项目备注


        province_id:0,
        city_id:0,
        area_id:0,
        address_txt:'',

        column1:'',
        column2:'',
        column3:''

     }
  },
  async created(){
    let re =  await this.$axios.post('/bid/pushBidInit') 
        //如果是医院 ，且审核通过
        if(re.code == 200){
          let user = re.data;
            this.bid_post_addr = user.post_addr,
            this.province_id = user.province_id,
            this.city_id = user.city_id,
            this.area_id = user.area_id,
            this.address_txt = user.area,
            this.bid_contact_name = user.agent,
            this.bid_contact_phone = user.user_phone,

            this.column1 = user.column1,
            this.column2 = user.column2,
            this.column3 = user.column3

        
        }else{
          this.$createDialog({
              type: 'alert',
              title: '提示',
              content: re.msg,
              icon: '',
              onConfirm: () => {
                //未登录
                if(re.code == 401){
                     this.$router.push({path:'/register/login'})

                //用户未认证
                }else if(re.code == 211){
                      this.$router.push({path:'/register/status'})


                }else{
                     
                     this.$router.push({path:'/'})
                }
              },
          }).show()

        }
  },
  
  mounted(){
    this.addressPicker = this.$createCascadePicker({
      title: '所在省市',
      data: addressData,
      onSelect: this.addressSelect,
      onCancel: this.cancelHandle
    })
            
  },
  components: {
    'Bartab':Bartab
  },
  methods:{
    //付款方式选择
  showBidPayTypePicker(){
     if (!this.picker3) {
        this.picker3 = this.$createPicker({
          title: '付款方式',
          data: [this.column3],
          onSelect: this.bidPayTypeSelect,
          onCancel: this.cancelHandle
        })
      }
      this.picker3.show()
   },
   //付款方式选中
    bidPayTypeSelect(selectedVal, selectedIndex, selectedText) {
      this.bid_pay_type = selectedVal.join(', ')
      this.bid_pay_type_txt = selectedText.join(' ')
    },
  //交货时间选择
  showBidTimePicker(){
     if (!this.picker2) {
        this.picker2 = this.$createPicker({
          title: '交货时间',
          data: [this.column2],
          onSelect: this.bidTimeSelect,
          onCancel: this.cancelHandle
        })
      }
      this.picker2.show()
   },
   //交货时间选中
    bidTimeSelect(selectedVal, selectedIndex, selectedText) {
      this.bid_arrival_time = selectedVal.join(', ')
      this.bid_time_txt = selectedText.join(' ')
    },
  //所在省市区选择
  showAddressPicker() {
      this.addressPicker.show()
  },
  //所在省市选中
  addressSelect(selectedVal, selectedIndex, selectedText) {
      this.province_id = selectedVal[0]
      this.city_id = selectedVal[1]
      this.area_id = selectedVal[2]
      this.address_txt=selectedText.join(' ')

  },
  //分类选择
  showBidTypePicker(){

     if (!this.picker1) {
        this.picker1 = this.$createPicker({
          title: '分类',
          data: [this.column1],
          onSelect: this.bidTypeSelect,
          onCancel: this.cancelHandle
        })
      }
      this.picker1.show()
   },
   // 分类选中
    bidTypeSelect(selectedVal, selectedIndex, selectedText) {
      this.bid_type = selectedVal.join(', ')
      this.bid_type_txt = selectedText.join(' ')
    },
    //点击取消
    cancelHandle() {
      this.$createToast({
        type: 'txt',
        txt: '未选择',
        time: 1000
      }).show()
    },
    //添加商品
  addNewPro() {
    let addPro = this.addPro;
    let newArray = {
        goods_name:'',
        goods_brand_model:'',
        goods_unit:'',
        goods_num:'',
        goods_price:'',
        goods_remark:''

    }
    this.addPro = addPro.concat(newArray)
  },
  //删除
  delPro(index) {
    let arrayLength = this.addPro.length //数组长度
    let newArray = [];
    if (arrayLength > 1) {
      //数组长度>1 才能删除
      for (let i = 0; i < arrayLength; i++) {
        if (i !== index) {
            newArray.push(this.addPro[i])
        }
      }
      this.addPro =  newArray;
    }
  },
   //产品 获取输入框信息
  setInputValue(e) {
    let index = e.target.getAttribute('index') //数组下标
    let tag = e.target.getAttribute('data-tag')  //字段名称
    let array = this.addPro;
    let total = 0; //预算

   
    array[index][tag] = e.target.value  //赋值
    this.addPro = array;
    //计算预算
    for (var i = 0; i < array.length; i++) {
        total =  total+Math.floor(parseFloat(array[i]['goods_price']*100 * array[i]['goods_num']))/100;
        // total = (total+array[i]['goods_price'] * array[i]['goods_num'])*100/100
    }
    this.bid_budget = total;

   },
   //input 动态赋值
   setVal(e){
      let tag = e.target.getAttribute('data-tag')  //字段名称
      let val = e.target.value  //赋值
      this[tag] = val
   },

   async formSubmit(){
    var formData ={}
    var userInfo = this.getUserInfo();
    var arr = this.addPro;

    for (var i = 0; i < arr.length; i++) {
              if (new RegExp('^[\\S]{2,20}$').test(arr[i].goods_name) != true) {
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '产品名称不能为空或格式不正确!',
                        icon: ''
                      }).show()
                    return
                }
                if (new RegExp('^[\\S]{2,20}$').test(arr[i].goods_brand_model) != true) {
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '品牌/型号不能为空或格式不正确!',
                        icon: ''
                      }).show()
                    return
                }
                if (new RegExp('^[\u4E00-\u9FA5A-Za-z]{1,10}$').test(arr[i].goods_unit) != true) {
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '单位不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return
                }
                if (new RegExp('^[0-9]{1,10}$').test(arr[i].goods_num) != true) {
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '数量不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return
                
                }
                if(arr[i].goods_price == ''){
                     this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '单价不能为空!',
                        icon: ''
                      }).show()  
                      return  
                }
                if (new RegExp('(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)').test(arr[i].goods_price) != true) {
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '单价格式不正确!请重新输入',
                        icon: ''
                      }).show()  
                      return             
                }
                if (new RegExp('^[\\S]{0,200}$').test(arr[i].goods_remark) != true) {
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '产品说明字数过长',
                        icon: ''
                      }).show()
                  return
                 }
  
    }
   if(this.bid_type == "" || this.bid_type == 0) {
                  this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请选择项目分类!',
                        icon: ''
                      }).show()
                  return
     
   }
   
   if(this.province_id == 0 || this.city_id == 0 || this.area_id == 0) {
                this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请选择收货地址!',
                        icon: ''
                      }).show()
                return
      
   }
  if(new RegExp('^[\\S]{2,40}$').test(this.bid_post_addr) != true) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '详细地址不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return
         
   }if (new RegExp('^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$').test(this.bid_contact_name) != true) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '联系人不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return
        
   }
   if(new RegExp('^[0-9\-]{8,20}$').test(this.bid_contact_phone) != true) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '联系电话不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return 

   }
 if (this.bid_arrival_time == "" || this.bid_arrival_time == 0) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请选择交货时间!',
                        icon: ''
                   }).show()
            return
   }
    if (RegExp('(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)').test(this.bid_budget) != true) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '预算金额不能为空或格式不正确!',
                        icon: ''
                      }).show()
                  return 

   }if (this.bid_pay_type == "" || this.bid_pay_type == 0) {
           this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请选择付款方式!',
                        icon: ''
                      }).show()
                  return 
   }
   if(new RegExp('^[\\S]{0,200}$').test(this.bid_remark) != true) {
            this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '项目备注字数过长',
                        icon: ''
                      }).show()
                  return
   }


    formData['addPro'] = this.addPro; //产品
    formData['bid_type'] = this.bid_type;//项目分类
    formData['bid_post_addr'] = this.bid_post_addr;//收货地址
    formData['bid_contact_name'] = this.bid_contact_name;//联系人
    formData['bid_contact_phone'] = this.bid_contact_phone;//联系电话
    formData['bid_arrival_time'] = this.bid_arrival_time;//交货时间
    formData['bid_budget'] = this.bid_budget;//预算
    formData['bid_pay_type'] = this.bid_pay_type;//付款方式
    formData['bid_remark'] = this.bid_remark;//项目备注
    formData['province_id'] = this.province_id;
    formData['city_id'] = this.city_id;
    formData['area_id'] = this.area_id;
    // console.log(formData)
    let that = this;
    this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '提示',
        content: '您发布竞价具有法律效益，请认真对待，确认发布竞价？',
        onConfirm: () => {
            let re =  this.$axios.post('/bid/pushBid',{
              formData:formData
            }).then(function(re){
                if(re.code == 200){
                   that.$router.push({path:'/'})

                    // this.is_show=false
                    // this.show_success=true
                    // this.res_bid_id=re.data.data.bid_id
                }
            })
             
        },
        onCancel: () => {
          this.$createToast({
            type: 'warn',
            time: 1000,
            txt: '未发布'
          }).show()
        }
      }).show()
    
    
     
   },
  

    gologin(){
        this.$router.push({path:'/register/login'})
    },
    //关闭弹窗
    closeTip(){
        this.showAlert = false;
    }


  }
}
</script>